<template>
	<view class="card-item" @click="maskDetail">
		<maskStatus :sort="sort" :Tasktype="Tasktype" :info="info"></maskStatus>
		<view class="item-content-box">
			<view class="userinfo-box">
				<assign :initiator="info.createUser.userName" :appointor="info.leader.userName"></assign>
			</view>
			<view class="card-info">
				<view class="info-left-item">
					<view class="item-title">
						优先级：
					</view>
					<view class="item-num" :style="{'backgroundColor': numberColorList[info.priority]}">
						{{info.priority}}
					</view>
				</view>
				<view class="info-right-item">
					<view class="item-title">
						重要程度：
					</view>
					<view class="item-num" :style="{'backgroundColor': numberColorList[info.importance]}">
						{{info.importance}}
					</view>
				</view>
			</view>
			<view class="card-bottom-box">
				<view class="time-box">
					<view class="create-time">
						<view class="time-title">
							创建时间：
						</view>
						<view class="time-item">
							{{info.createTime}}
						</view>
					</view>
					<view class="stop-time">
						<view class="time-title">
							截止时间：
						</view>
						<view class="time-item">
							{{info.endTime}}
						</view>
					</view>
				</view>
				<view class="button-box">
					<view class="message-button" v-if="sort == false && isMessage == true" @click.stop="maskMessage">
						消息
					</view>
				</view>
			</view>
		</view>
		<view class="sort-box" v-if="sort == true && sortHidden == false">
			<view class="sort-item disabled" v-if="sortTop == true">
				置顶
			</view>
			<view class="sort-item" @click="topping(index)" v-if="sortTop == false">
				置顶
			</view>
			<view class="sort-item disabled" v-if="sortTop == true">
				上移
			</view>
			<view class="sort-item" @click="moveUp(index)" v-if="sortTop == false">
				上移
			</view>
			<view class="sort-item disabled" v-if="sortBottom == true">
				下移
			</view>
			<view class="sort-item" @click="moveDown(index)" v-if="sortBottom == false">
				下移
			</view>
		</view>
	</view>
</template>

<script>
	import maskStatus from './maskStatus';
	import assign from '../assign/assign';
	export default {
		components: {
			assign,maskStatus
		},
		props: {
			Tasktype:{ // 显示任务类型（ALL：全展示，TIME：显示日期，SON：显示子任务）
				type:String,
				default:"ALL"
			},
			data: { // 任务数据信息
				type: Object,
				default: {},
			},
			iswarning:{ // 是否显示警告图标
				type:Boolean,
				default:false,
			},
			index:{ // 当前卡片下标
				type:Number,
				default:0,
			},
			sortTop:{ // 是否第一个（不可用置顶、上移）
				type:Boolean,
				default:false,
			},
			sortBottom:{ // 是否最后一个（不可用下移）
				type:Boolean,
				default:false,
			},
			sort:{ // 是否排序方式
				type:Boolean,
				default:false,
			},
			sortHidden:{ // 是否隐藏排序按钮
				type:Boolean,
				default:false,
			},
			isMessage:{ // 是否显示消息按钮
				type:Boolean,
				default:true,
			},
		},
		data() {
			return {
				info: {},
				statusList: [{
						id: 0,
						name: "未开始" 
					},
					{
						id: 1,
						name: "进行中",
						color:'#6ea7de',
					},
					{
						id: 2,
						name: "已暂停",
						color:'#fcad4e',
					},
					{
						id: 3,
						name: "完成提报中",
						color:'#147797',
					},
					{
						id: 4,
						name: "异常提报中",
						color:'#c8443f'
					},
					{
						id: 5,
						name: "正常完成",
						color:'#7bc094'
					},
					{
						id: 6,
						name: "异常完成",
						color:'#fe0000'
					}
				],
				numberColorList:['','#d82b58','#f53d33','#fb950d','#f0b75d','#687178'],
			}
		},
		created() {
			let that = this;
			this.$nextTick(function() {
				let data = that.data;
				if (data.createTime) {
					data.createTime = data.createTime.substring(0, data.createTime.length - 3);
				}
				if (data.endTime) {
					data.endTime = data.endTime.substring(0, data.endTime.length - 3);
				}
				if (data.priority) {
					data.priority = data.priority.substring(0, 1);
				}else{
					data.priority = 3;
				}
				if (data.importance) {
					data.importance = data.importance.substring(0, 1);
				}else{
					data.importance = 3;
				}
				that.info = data;
			})

		},
		methods: {
			/**
			 * 点击卡片触发事件
			 */
			maskDetail: function() {
				let data = this.data;
				this.$emit('Tap', data);
			},
			/**
			 * 点击消息按钮触发事件
			 */
			maskMessage: function() {
				this.$emit('message');
			},
			/**
			 *  置顶按钮触发事件
			 */
			topping:function(index){
				this.$emit('topping',index);
			},
			/**
			 * 上移按钮触发事件
			 */
			moveUp:function(index){
				this.$emit('moveUp',index);
			},
			/**
			 * 下移按钮触发事件
			 */
			moveDown:function(index){
				this.$emit('moveDown',index);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card-item {
		width: calc(100% - 50rpx);
		-moz-box-shadow: -1rpx 1rpx 15rpx #333333;
		-webkit-box-shadow: -1rpx 1rpx 15rpx #333333;
		box-shadow: -1rpx 1rpx 15rpx #333333;
		border-radius: 20rpx;
		margin: 25rpx;
		margin-top: 0;
		overflow: hidden;
		position: relative;

		.item-content-box {
			box-sizing: border-box;
			width:100%;
			padding: 20rpx;
			background-color: white;

			.userinfo-box {
				margin-bottom: 20rpx;
			}

			.card-info {
				overflow: hidden;

				.info-left-item {
					display: flex;
					float: left;

					.item-title {
						font-size: 30rpx;
						color: #696969;
					}

					.item-num {
						color: white;
						width: 40rpx;
						height: 40rpx;
						text-align: center;
						line-height: 40rpx;
						font-size: 24rpx;
						border-radius: 10rpx;
						background-color: #ed9817;
					}
				}

				.info-right-item {
					float: right;
					display: flex;

					.item-title {
						font-size: 30rpx;
						color: #696969;
					}

					.item-num {
						color: white;
						width: 40rpx;
						height: 40rpx;
						text-align: center;
						line-height: 40rpx;
						font-size: 24rpx;
						border-radius: 10rpx;
						background-color: #ed9817;
					}
				}
			}

			.card-bottom-box {
				overflow: hidden;
				margin-top: 40rpx;

				.time-box {
					float: left;

					.create-time {
						display: flex;
						color: #cecece;
						font-size: 30rpx;

						.time-title {}

						.time-item {}
					}

					.stop-time {
						display: flex;
						color: #cecece;
						font-size: 30rpx;

						.time-title {}

						.time-item {
							color: #f27e17;
						}
					}
				}

				.button-box {
					float: right;
					margin-right: 20rpx;

					.message-button {
						background-color: #33ad84;
						color: white;
						border-radius: 10rpx;
						line-height: 70rpx;
						width: fit-content;
						padding: 0 20rpx;
						font-size: 26rpx;
					}
				}	
			}
			
		}
		.sort-box{
			display: flex;
			background-color: white;
			border-top:1px solid #fafafa;
			.sort-item{
				color: #33ad84;
				border-right:1px solid #fafafa;
				font-size: 28rpx;
				width: 33.33%;
				text-align: center;
				line-height: 80rpx;
			}
			.disabled{
				color:#cbcbcb;
			}
			.sort-item:last-child{
				border-right: none;
			}
		}
	}
</style>
